* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 14px;
    color: white;
}

#root {
    // position: absolute;
    // top: 0;
    // left: 0;
    width: 100%;
    height: 100%;

    background-image: url("../assets/image/bg.png");
}

// 4角定位
.border-1 {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 2px solid aqua;
    border-left: 2px solid aqua;
    border-bottom: 2px solid rgba(0, 255, 255, 0);
    border-right: 2px solid rgba(0, 255, 255, 0);
}

.border-2 {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    right: 0;
    border-top: 2px solid aqua;
    border-left: 2px solid rgba(0, 255, 255, 0);
    border-bottom: 2px solid rgba(0, 255, 255, 0);
    border-right: 2px solid aqua;
}

.border-3 {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    border-top: 2px solid rgba(0, 255, 255, 0);
    border-left: 2px solid rgba(0, 255, 255, 0);
    border-bottom: 2px solid aqua;
    border-right: 2px solid aqua;
}

.border-4 {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 2px solid rgba(0, 255, 255, 0);
    border-left: 2px solid aqua;
    border-bottom: 2px solid aqua;
    border-right: 2px solid rgba(0, 255, 255, 0);
}